<template>
  <div class="form-number-range">
    <input
      autocomplete="off"
      ref="startInput"
      type="number"
      :id="`form_${field.fieldName}_start`"
      :placeholder="placeholder"
      :value="start"
      @input="e => input(e, 'start')"
      :disabled="disabled" 
    />
    <span>-</span>
    <input
      autocomplete="off"
      ref="endInput"
      type="number"
      :id="`form_${field.fieldName}_end`"
      :placeholder="placeholder"
      :value="end"
      @input="e => input(e, 'end')"
      :disabled="disabled" 
    />
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form';
import { FORM_FIELD_TEXT_MAX_LENGTH } from '@src/model/const/Number.ts';

export default {
  name: 'form-number-range',
  mixins: [FormMixin],
  props: {
    value: [Object, String],
  },
  data() {
    return {
      start: null,
      end: null,
    };
  },
  computed: {
    getInput() {
      return this.$refs.input || this.$refs.textarea;
    },
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.setNativeStartValue('start');
        this.setNativeStartValue('end');
      },
    },
  },
  mounted() {
    const startInputEl = this.$refs.startInput;
    const endInputEl = this.$refs.endInput;

    // startInputEl.addEventListener('paste', this.pasteEventHandler)
    // endInputEl.addEventListener('paste', this.pasteEventHandler)
  },
  beforeDestroy() {
    // this.$refs.startInput.removeEventListener('paste', this.pasteEventHandler);
    // this.$refs.endInput.removeEventListener('paste', this.pasteEventHandler);
  },
  methods: {
    input(event, type) {
      let oldValue = null;
      let newValue = event.target.value;

      if (newValue == this.getNativeStartValue(type)) return;

      if (newValue === '') {
        this.$nextTick(() => {
          event.target.value = '';
        });
      }

      // 远程验证事件处理
      this.remoteValidateHandler();

      this[type] = newValue;
      this.$emit('update', { newValue: { start: this.start, end: this.end }, oldValue, field: this.field });
      this.$emit('input', this.value);
    },
    getNativeStartValue(type) {
      if (type === 'start') {
        return this.value?.start === null || this.value?.start === undefined ? '' : String(this.value?.start);
      }

      if (type === 'end') {
        return this.value?.end === null || this.value?.end === undefined ? '' : String(this.value?.end);
      }
    },
    setNativeStartValue(type) {
      const input = this.$refs?.[`${type}Input`];

      if (!input) return;
      const val = this.getNativeStartValue(type);
      if (input.value === val) return;

      input.value = val;
      this[type] = val;
    },
    pasteEventHandler(event) {
      try {
        let number = event.clipboardData.getData('text');
        let newValue = number;

        if (number.length > FORM_FIELD_TEXT_MAX_LENGTH) {
          newValue = number.slice(0, FORM_FIELD_TEXT_MAX_LENGTH);
        }

        this.$emit('update', { newValue, field: this.field });
        this.$emit('input', newValue);
        event.preventDefault(); // 阻止粘贴默认事件造成，复制2次的问题
      } catch (error) {
        console.warn('form-number: paste -> error', error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.form-number-range {
  width: 100%;
  span {
    margin: 0 10px;
  }
  input {
    width: 45%;
    &:disabled {
      -webkit-text-fill-color: #bfbfbf;
      border-color: #d9d9d9;
      background-color: #f5f5f5;
      &:hover {
        border-color: #d9d9d9;
      }
    }
  }
}
</style>
